import { Menu } from '@arco-design/web-react';
import '@arco-design/web-react/dist/css/arco.css';
import './Menu.css';
import ElectronBottom from '../HelloElectronBottom';
import { Route } from 'react-router-dom';
import React, { useState } from 'react';
import HelloElectronBottom from '../HelloElectronBottom';
import Hello from '../Hello';
import MoviesScreen from '../movies/MoviesScreen';

const MenuItem = Menu.Item;
const SubMenu = Menu.SubMenu;

function MenuScreen() {
  // 定义一个状态来保存当前选择的菜单项
  const [selectedKey, setSelectedKey] = useState('1');

  // 处理菜单切换事件
  const handleMenuClick: (
    key: string,
    event: React.MouseEvent,
    keyPath: string[],
  ) => void = (key, event, keyPath) => {
    console.log('Clicked key:', key);
    console.log('Event:', event);
    console.log('Key Path:', keyPath);

    // 这里可以根据点击的菜单项做相应的处理
    // 比如更新状态或导航到不同的页面
    setSelectedKey(key); // 假设有一个状态来跟踪选中的菜单项
  };

  // 渲染不同布局
  const renderContent = () => {
    console.log('selectedKey:', selectedKey);
    switch (selectedKey) {
      case '1':
        return <Hello />;
      case '2':
        return <MoviesScreen />;
      case '3':
        return <CloudServiceLayout />;
      case '4':
        return <CooperationLayout />;
      default:
        return <HomeLayout />;
    }
  };
  return (
    <div className="menu-demo">
      <Menu
        mode="horizontal"
        defaultSelectedKeys={['1']}
        className="menu" // 添加类名
        selectedKeys={[selectedKey]}
        onClickMenuItem={handleMenuClick}
      >
        <MenuItem key="1" className="menu-item">首页</MenuItem>
        <MenuItem key="2" className="menu-item">电影列表</MenuItem>
        <MenuItem key="3" className="menu-item">标题3</MenuItem>
        <MenuItem key="4" className="menu-item">标题4</MenuItem>
      </Menu>
      {/* 根据选择的菜单项显示不同的布局 */}
      <div className="content-layout">{renderContent()}</div>
    </div>
  );
}

function HomeLayout() {
  return <div>Welcome to Home!</div>;
}

function CloudServiceLayout() {
  return <div>Cloud services information.</div>;
}

function CooperationLayout() {
  return <div>Cooperation opportunities.</div>;
}

export default MenuScreen;
